<template>
  <div>
    <!--工具类-->
    <Row style="text-align: left;" >
      <i-col span="24" class-name="y_query_right">
        <Select placeholder="模板类型" v-model="param.couponType" :clearable=true class="y_condition" style="text-align: left;">
          <Option v-for="item in couponTypeDict" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
        <Input placeholder="模板标题" v-model.trim="param.couponTitle" class="y_condition" :clearable=true></Input>
        <Input placeholder="用户名" v-model.trim="param.userName" class="y_condition" :clearable=true></Input>
        <Tooltip content="勾选此项后可以查询全部优惠券，否则只能查询员工个人派发的优惠券。" max-width="260">
          <Checkbox v-model="param.isGetAll" class="y_condition" v-has=tRole.COUPONS_2_101>查询全部</Checkbox></Tooltip>
        <Button type="primary" icon="md-search" class="y_condition" @click="searchList">过滤查询</Button>
      </i-col>
    </Row>
<!--    <Row>
      <Table stripe border :context="this" :columns="tableTitles" :data="couponDetailList" class="base_table"
              no-data-text="暂无数据"></Table>
    </Row>-->

    <List border class="data-list">
      <template v-if="couponDetailList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in couponDetailList" :key="index" class="list-item">
          <div class="item-top">
            <KeyValueView title="标题" :value="item.title"></KeyValueView>
            <Tag :color="getStateColor(item)">{{getState(item)}}</Tag>
          </div>
          <div class="item-content">
            <KeyValueView title="类型" :value="getType(item)"></KeyValueView>
            <KeyValueView title="发放方式" :value="getDistributionMethod(item)"></KeyValueView>
            <KeyValueView title="折扣" :value="getDiscount(item)"></KeyValueView>
            <KeyValueView title="用户名" :value="item.userEncodeName"></KeyValueView>
            <KeyValueView title="发放/兑换时间" :value="formatDate(item.createtime)"></KeyValueView>
            <KeyValueView title="有效期截止" :value="formatDate(item.endtime)"></KeyValueView>
          </div>
          <div class="item-bottom">
            <Button type="primary" size="small" icon="md-create" @click="showCouponDetailAction(index)">详情</Button>
            <Button type="error" size="small" icon="md-return-left" :disabled="!(item.distributionMethod==200&&(item.state==100||item.state==200))" @click="revokeCoupon(index)">撤回</Button>
          </div>
        </ListItem>
      </template>
    </List>
    <div style="margin-top: 20px; text-align: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator/>
    </div>

    <Modal
      v-model="modalView.isShow"
      title="优惠券详情"
      :mask-closable="true"
      :styles="{top: '20px',bottom:'20px',width:'70%'}">
        <div class="modal_base_div"  style="margin-top:0px; padding: 0px;border: none">
          <Row style="">
            <i-col span="12">
              <span class="tiy_key">优惠券标题:</span><span>{{couponDetail.title}}</span>
            </i-col>
          </Row>
          <Row style="">
            <i-col span="12">
               <span class="tiy_key">优惠券类型 :</span><span>{{getMapKey(couponTypeDict, couponDetail.type)}}</span>
            </i-col>
            <i-col span="12">
               <span class="tiy_key">状态 :</span><span> {{getMapKey(couponDetailStateDict,couponDetail.state)}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12" v-show="couponDetail.type==200">
              <span class="tiy_key">折扣比例 :</span><span> {{100-couponDetail.discountRate*100}}%</span>
            </i-col>
            <i-col span="12"  v-show="couponDetail.type==100">
              <span class="tiy_key">优惠券面值 :</span><span> {{couponDetail.faceValue}}</span>
            </i-col>

            <i-col span="12">
              <span class="tiy_key">使用门槛 :</span><span> ${{couponDetail.threshold}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <span class="tiy_key">发放时间 :</span><span>  {{formatDate(couponDetail.starttime)}}</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">有效期截止 :</span><span>  {{formatDate(couponDetail.endtime)}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <span class="tiy_key">发放方式:</span><span> {{getMapKey(couponDistriubtionMethodDict,couponDetail.distributionMethod)}}</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">券码:</span><span> {{couponDetail.couponCode}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <span class="tiy_key">发放人:</span><span> {{couponDetail.employeeName}}</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">用户名:</span><span> {{couponDetail.userEncodeName}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <span class="tiy_key">使用日期:</span><span> {{formatDate(couponDetail.useTime)}}</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">订单号:</span><span> {{couponDetail.serialNumber}}</span>
            </i-col>
          </Row>
        </div>
    </Modal>
  </div>
</template>

<script>
    import ICol from "../../../node_modules/view-design/src/components/grid/col";
    import tiyData from "./js/couponDetail/coupon_detail_data";
    import {init,webList,revokeCoupon,getCouponDetail} from "./js/couponDetail/coupon_detail_fun"
    import tiy from "../../site/Site";
    import {isEmpty} from "../js/commonUtils";
    import KeyValueView from "../widgets/KeyValueView";

    export default {
        components: {KeyValueView, ICol},
        data(){
            return {
                //列表
              couponDetailList:tiyData.tData.couponDetailList,
              tableTitles:tiyData.tTable(this),
              page:tiyData.tPage,
              param:tiyData.tParam,
              modalView:tiyData.tStatus.modalView,
              //查看详情
              couponDetail:tiyData.tParam.couponDetail,
              tRole:{
                COUPONS_2_101 : "COUPONS-2-101"
              }
            }
        },
        computed : {

            couponDetailStateDict(){
                return this.$store.getters.dictionaries.couponDetailStateDict
            },
            couponTypeDict(){
                return this.$store.getters.dictionaries.couponType
            },
            couponDistriubtionMethodDict(){
                return this.$store.getters.dictionaries.couponDistriubtionMethod
            }
        },
        methods: {

            searchList(){
                tiyData.tPage.currentPage = 1;
                webList(this,tiyData);
            },
            changePage(page){
                tiyData.tPage.currentPage = page;
                webList(this, tiyData);
            },
            sizeChange(p){
                tiyData.tPage.stepNumber = p;
                webList(this, tiyData);
            },
            //dict根据value获取key
            getMapKey(dict,value) {
                let current = dict.filter(item=>item.value==value);
                let name = "";
                if(current.length>0){
                    name = current[0].name;
                }
                return name;
            },
            showCouponDetailAction(index){
                this.modalView.isShow = true;
                this.modalView.isLoading = true;
                tiyData.tParam.couponDetailId = this.couponDetailList[index].id;
                getCouponDetail(this, tiyData);
                // this.couponDetail = this.couponDetailList[index];
            },
            revokeCoupon(index) {
              tiyData.tParam.couponDetailId = this.couponDetailList[index].id;
              revokeCoupon(this, tiyData);
            },
          formatDate(time) {
            if(isEmpty(time)) {
              return "";
            }
            return this.$tiyBJTime(time);
          },
          getStateColor(item) {
            let fontColor = "green";
            switch(item.state){
              case 100:
                fontColor = "grey";
                break;
              case 200:
                fontColor = "green";
                break;
              case 300:
                fontColor = "blue";
                break;
              case 400:
                fontColor = "magenta";
                break;
              default:
                break;
            }
            return fontColor;
          },
          getState(item) {
            let stateName =  this.getMapKey(this.couponDetailStateDict, item.state);
            return stateName;
          },
          getType(item) {
            return item.type===200?"折扣券":"现金抵扣券";
          },
          getDistributionMethod(item) {
            return item.distributionMethod===100?'用户兑换':'后台发放';
          },
          getDiscount(item) {
            let discountValue = "";
            let couponType = item.type;
            if(couponType===100){
              discountValue = '$'+item.faceValue;
            }else if(couponType == 200){
              discountValue = (100-item.discountRate*100).toFixed(1)+"%";
            }
            return '满 $'+item.threshold+' 减 '+ discountValue;
          },
        },
        created() {
            init(this,tiyData);
            // webList(this,tiyData);
        }
    }
</script>

<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .modal_form_input {
    width: 200px;
    margin-right: 10px;

  }
.data-list {
  margin: 1rem 0rem;
  line-height: 25px;
  .list-item {
    .flex-colum-wrap;
    justify-items: left;
    align-items: start;
    .item-checkbox {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      vertical-align: top;
    }
    .item-img {
      width: 130px;
      text-align: center;
      display: inline-block;
    }
    .item-top{
      width: 100%;
      margin-bottom: 5px;
      .flex-row-wrap;
      justify-content: space-between;
    }
    .item-content {
      margin-bottom: 35px;
      text-align: left;
    }
    .item-bottom{
      //position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      //padding: 0 1rem 0.5rem 0;
      text-align: right;
      button {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
